﻿
@{
    ViewBag.Title = "TimeSlider";
}

<div class="span12">
    <h2>TimeSlider</h2>
    <hr />
    <div class="well">Kurzer Beschreibungstext für das aktuelle Formular</div>
</div>

<div class="span12">
    <div class="well well-small">
        <fieldset>
            <legend>Einstellungen vornehmen</legend>
            <label for="amount">Timerange: </label>
            <input id="StartTime" readonly="readonly" class="text-box single-line input-mini uneditable-input" 
                type="time" value="07:00" name="StartTime" data-val="true">
            bis
            <input id="EndTime" readonly="readonly" class="text-box single-line input-mini uneditable-input"
                 type="time" value="16:00" name="EndTime" data-val="true">
            Uhr

                <div style="margin-top: 5px; height: 23px;" class="well">
                    <div class="row">
                        <div class="span11">
                            <div id="slider-range"></div>
                        </div>
                        <div class="row">
                            <div style="padding-left: 20px;" class="span1">
                                <i id="addOneStart" class="icon-plus"></i>
                                <i id="subOneStart" class="icon-minus"></i>
                            </div>
                            <div class="span9"></div>
                            <div style="margin-right: -10px" class="span1 pull-right">
                                <i id="subOneEnde" class="icon-minus"></i>
                                <i id="addOneEnde" class="icon-plus"></i>
                            </div>
                        </div>
                    </div>
                </div>
        </fieldset>
    </div>
</div>


<div class="span12">
    <div class="well">
        @Html.ActionLink("Zurück zur Startseite", "Index", "Home", null, new { @class = "btn btn-mini" })
    </div>
</div>

@section scripts
{
    @Scripts.Render("~/bundles/jqueryui")

  <script>
        $(function () {
            var stepSize = 5; //anzahl der Minuten die gesetzt werden sollen

            //Slider definieren
            var slider = $("#slider-range").slider({
                range: true,
                min: 0,
                max: 1440,
                step: stepSize,
                values: [420, 900],
                slide: function (event, ui) {
                    //Die Start und Endezeit des Sliders ermitteln die gerade ausgeählt sind.
                    var start = moment("HH:mm", "00:00").minutes(ui.values[0]),
                        ende = moment("HH:mm", "00:00").minutes(ui.values[1]);
                    $("#StartTime").val(start.format("HH:mm"));
                    $("#EndTime").val(ende.format("HH:mm"));
                }
            });
            
            //Beim Start des Programm die passende Start und Endezeit in die Textboxen eintragen.
            var start = moment("HH:mm", "00:00").minutes($("#slider-range").slider("values", 0)),
                ende = moment("HH:mm", "00:00").minutes($("#slider-range").slider("values", 1));
            $("#StartTime").val(start.format("HH:mm"));
            $("#EndTime").val(ende.format("HH:mm"));

            //Eventhandler erstellen für die + und - Bilder zum setzten der passenden Zeiten
            $("#addOneStart").on("click",function () {
                setSliderStart(0, '#StartTime', stepSize);
            });
            
            $("#subOneStart").on("click", function () {
                setSliderStart(0, '#StartTime', -1 * stepSize);
            });
            
            $("#addOneEnde").on("click", function () {
                setSliderEnde(1, '#EndTime', stepSize);
            });

            $("#subOneEnde").on("click", function () {
                setSliderEnde(1, '#EndTime', -1 * stepSize);
            });

            //Den Startzeitslider setzten
            function setSliderStart(index, timeId, diff) {
                //Auslesen der aktuellen Oberflächenwerte
                var startTime = $("#StartTime").val(),
                endTime = $("#EndTime").val(),
                ende = moment(endTime, "HH:mm"),
                start = moment(startTime, "HH:mm"),
                    //die passenden Start und Endeminuten berechnen die aktuell angezeigt werden.
                startMinutes = start.hours() * 60 + start.minutes(),
                endMinutes = ende.hours() * 60 + ende.minutes();
                //Prüfen das die Slider sich nicht "vertauschen" Min und Max Value prüfen
                if ((startMinutes + diff) <= endMinutes && (startMinutes + diff) >= 0) {
                    //http://stackoverflow.com/questions/2833396/jquery-ui-slider-setting-programatically
                    //der Index gibt an welcher Slider gesetzt werden soll der für Min oder Max
                    slider.slider("values", index, startMinutes + diff);
                    //Prüfen ob die Minuten addiert oder Subtrahiert werden sollen
                    if (diff < 0) {
                        $(timeId).val(start.subtract("m", stepSize).format("HH:mm"));
                    } else {
                        $(timeId).val(start.add("m", stepSize).format("HH:mm"));
                    }
                }
            }
            
            //Den Endezeitslider setzten
            function setSliderEnde(index, timeId, diff) {
                var startTime = $("#StartTime").val(),
                endTime = $("#EndTime").val(),
                ende = moment(endTime, "HH:mm"),
                start = moment(startTime, "HH:mm"),
                startMinutes = start.hours() * 60 + start.minutes(),
                endMinutes = ende.hours() * 60 + ende.minutes();
                if (startMinutes <= (endMinutes + diff) && (endMinutes + diff) < 1440) {
                    slider.slider("values", index, endMinutes + diff);
                    if (diff < 0) {
                        $(timeId).val(ende.subtract("m", stepSize).format("HH:mm"));
                    } else {
                        $(timeId).val(ende.add("m", stepSize).format("HH:mm"));
                    }
                }
            }
        });
    </script>

}
